<template>
  <el-dialog :close-on-click-modal="false" v-model="dialogFormVisible" top="1vh" @close="handleClose" :title="title"
             width="1120px">
    <el-form
        v-loading="editLoading"
        ref="formRef"
        label-width="220px"
        :model="form"
        style="padding: 30px"
        :rules="rules"
    >
      <el-form-item label="系统名称：" required prop="sysname">
        <el-input v-model="form.sysname" autocomplete="off" maxlength="200" placeholder="系统名称"/>
      </el-form-item>
      <el-form-item label="代号：" required prop="syscode">
        <el-input v-model="form.syscode" autocomplete="off" maxlength="200" placeholder="代号"/>
      </el-form-item>
      <el-form-item label="密码：" v-if="!form.id" prop="password">
        <el-input v-model="form.password" maxlength="200" type="url" placeholder="用于高危操作（比如：删除，发布）的密码确认，不支持修改!"/>
      </el-form-item>
      <el-form-item label="web域名：" required prop="domain">
        <el-input v-model="form.domain" autocomplete="off" maxlength="200" placeholder="web域名，以http开头"/>
      </el-form-item>
      <el-form-item label="网站logo：" required prop="logo">
          <div style="display: flex;justify-content: flex-start">
            <el-input v-model="form.logo" maxlength="200" placeholder="网站logo，以http开头" class="mr10"/>
            <kva-upload
                v-model="form.logo"
                @success="handleUploadSuccess"
                isvalid
                path="platform"
                :oldname="form.logo"
                ref="imgUploadRef"
            ></kva-upload>
          </div>
      </el-form-item>
      <el-form-item label="底部内容：" prop="footerhtml">
        <wangeditor ref="formeditorRef" v-model:content="form.footerHtml"></wangeditor>
      </el-form-item>
      <el-form-item label="qq链接：" prop="qqlink">
        <el-input v-model="form.qqlink" maxlength="200" type="url" placeholder="qq链接"/>
      </el-form-item>
      <el-form-item label="qq群1：" prop="tglink">
        <el-input v-model="form.tglink" maxlength="200" type="url" placeholder="qq群1"/>
      </el-form-item>
      <el-form-item label="QQ群2：" prop="twlink">
        <el-input v-model="form.twlink" maxlength="200" type="url" placeholder="QQ群2"/>
      </el-form-item>
      <el-form-item label="qq群3：" prop="bookmark">
        <el-input v-model="form.bookmark" maxlength="200" type="url" placeholder="qq群3"/>
      </el-form-item>
      <el-form-item label="QQ群4：" prop="commercialTg">
        <el-input v-model="form.commercialTg" maxlength="200" type="commercialTg" placeholder="QQ群4"/>
      </el-form-item>
      <el-form-item label="微信号（群）：" prop="weixinlink">
        <el-input v-model="form.weixinlink" maxlength="200" type="weixinlink" placeholder="微信号"/>
      </el-form-item>
      <el-form-item label="是否启用：" v-if="!form.id" required prop="openFlag">
        <el-radio-group v-model="form.openFlag">
          <el-radio :label="1">启用中</el-radio>
          <el-radio :label="0">已禁止</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="首页SEO关键词(keywords)：" prop="keywords">
        <el-input v-model="form.keywords" rows="15" maxlength="2000" type="textarea" placeholder="首页SEO关键词(keywords)"/>
      </el-form-item>
      <el-form-item label="首页SEO关键词(descriptions)：" prop="description">
        <el-input v-model="form.description" rows="15" maxlength="2000" type="textarea"
                  placeholder="首页SEO关键词(descriptions)"/>
      </el-form-item>
      <el-form-item label="头部公共代码（header）：" prop="headcode">
        <el-input v-model="form.headcode" rows="15" maxlength="2000" type="textarea"
                  placeholder="头部公共代码（header），比如：统计，样式"/>
      </el-form-item>
      <el-form-item label="底部公共代码（body）：" prop="footcode">
        <el-input v-model="form.footcode" rows="15" maxlength="2000" type="textarea"
                  placeholder="底部公共代码(body)，比如：统计，样式"/>
      </el-form-item>
      <div class="dialog-footer" style="text-align: center">
        <el-button @click="handleClose" icon="remove">取消</el-button>
        <el-button type="primary" :loading="suLoading" @click="handleSubmit" icon="plus">保存</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {getById, saveUpdate} from  '@/api/platform/system.js'
import KVA from '@/utils/kva.js'
import debounce from '@/utils/debounce'
const imgUploadRef = ref({})
const emits = defineEmits(["load"])
// 控制弹窗得显示
const dialogFormVisible = ref(false)
// 这个数据模型
let form = ref({
  sysname: "",
  syscode: "",
  domain: "",
  openFlag: 1,
  logo: "",
  qqlink: "",
  tglink: "",
  twlink: "",
  bookmark: "",
  commercialTg: "",
  weixinlink: "",
  password: "",
  footerHtml: "",
  keywords: "",
  description: "",
  footcode: "",
  headcode: "",
  status: 1
})

// 弹出标题
const title = ref("添加")
const editLoading = ref(false)
const suLoading = ref(false)
// 表单ref, 用于提交最终得验证处理
const formRef = ref({})
const formeditorRef = ref({})
// 表单验证
const rules = reactive({
  "sysname": [{required: true, message: '请输入系统名称', trigger: 'blur'}],
  "domain": [{required: true, message: '请输入web域名', trigger: 'blur'}],
  "syscode": [{required: true, message: '请输入系统代号', trigger: 'blur'}],
  "footerHtml": [{required: true, message: '网址底部内容必填', trigger: 'blur'}],
  "logo": [{required: true, message: 'logo必须填写', trigger: 'blur'}]
})

// 打开修改密码的弹窗
const handleOpen = async (opid) => {
  // 每次打开头重置
  dialogFormVisible.value = true;
  title.value = "添加"
  if (opid) {
    title.value = "编辑"
    editLoading.value = true;
    const resp = await getById(opid)
    editLoading.value = false;
    form.value = resp.data
    imgUploadRef.value.toggleImgcover(resp.data.logo)
    formeditorRef.value.setHtml(resp.data.footerHtml);
    title.value = "编辑【" + form.value.sysname + "】"
  }
}

// 上传封面回调
const handleUploadSuccess = (data1, data2) => {
  form.value.logo = data1
}

// 保存和修改
const handleSubmit = () => {
  suLoading.value = true
  debounce(() => {
    formRef.value.validate(async (valid, fields) => {
      if (valid) {
        try {
          await saveUpdate(form.value)
          suLoading.value = false
          // 提示保存成功
          KVA.notifySuccess(form.value.id ? "更新成功" : "保存成功")
          // 关闭弹窗
          handleClose()
          // 刷新方法
          emits("load")
        } catch (ex) {
          suLoading.value = false
        }
      } else {
        suLoading.value = false
      }
    })
  }, 600)
}

const handleClose = () => {
  formRef.value.resetFields()
  form.value = {
    id: "",
    sysname: "",
    syscode: "",
    domain: "",
    openFlag: 1,
    defaultFlag: 0,
    logo: "",
    qqlink: "",
    tglink: "",
    twlink: "",
    bookmark: "",
    footerHtml: "",
    commercialTg: "",
    weixinlink: "",
    keywords: "",
    description: "",
    footcode: "",
    headcode: "",
    status: 1
  }
  imgUploadRef.value.toggleImgcover("")
  suLoading.value = false
  editLoading.value = false
  dialogFormVisible.value = false
  formeditorRef.value.setHtml("")
}


// 把弹出打开得方法暴露给父组件进行调用
defineExpose({
  handleOpen
})
</script>